<script lang="ts" setup>
  import { getDevices, deleteDevice } from '@/api-new/devices';
  import TableLayout from '@/layout/table-layout.vue';
  import { usePageTable } from '@/hooks/arco/usePageTable';
  import { useModalHandler } from '@/hooks/arco/useModalHandler';
  import { Message, Modal } from '@arco-design/web-vue';
  import { useRoute } from 'vue-router';
  import useModeModalHandler from '@/hooks/arco/useModeModalHandler';
  import ReportModal from './report-modal.vue';
  import ReportRecordModal from './report-record-modal.vue';
  import AddModal from './add-modal.vue';

  const { meta } = useRoute();

  const { deviceTypeId } = meta;

  // 定义表格列
  const columns = [
    {
      title: '设备编码',
      width: '210',
      tooltip: true,
      ellipsis: true,
      dataIndex: 'deviceSn',
    },
    {
      title: '设备型号ID',
      width: '120',
      dataIndex: 'modelId',
    },
    {
      title: '设备名称',
      width: '200',
      tooltip: true,
      ellipsis: true,
      dataIndex: 'deviceName',
    },
    {
      title: '设备型号',
      width: '200',
      tooltip: true,
      ellipsis: true,
      dataIndex: 'modelCode',
    },
    {
      title: '入库时间',
      tooltip: true,
      width: '200',

      ellipsis: true,
      dataIndex: 'storageTime',
    },
    {
      title: '出库时间',
      width: '200',

      tooltip: true,
      ellipsis: true,
      dataIndex: 'deliveryTime',
    },
    {
      title: '报损时间',
      width: '200',

      tooltip: true,
      ellipsis: true,
      dataIndex: 'repairTime',
    },
    {
      title: '当前状态',
      width: '120',
      dataIndex: 'canBeScrapped',
      render: ({ record }: any) => {
        const { canBeScrapped, storageTime, deliveryTime } = record;

        if (!canBeScrapped) {
          return '已报损';
        }

        if (storageTime) {
          return '在库中';
        }

        if (deliveryTime) {
          return '已出库';
        }

        return '-';
      },
    },
    {
      title: '操作',
      align: 'center' as const,
      dataIndex: 'action',
      slotName: 'action',
      fixed: 'right',
    },
  ];

  const page = usePageTable({
    searchForm: {
      state: {
        name: '',
        idCard: '',
        phone: '',
        village: '',
        year: '',
        rating: '',
        deviceTypeId,
      },
    },
    table: {
      rowKey: 'deviceId',
      apiFun: getDevices,
      fakePage: true,
      columns,
    },
  });

  const onDelete = (record: any) => {
    Modal.warning({
      title: '警告',
      content: '确定要删除设备吗？',
      okText: '确定',
      cancelText: '取消',
      hideCancel: false,
      onBeforeOk: (done: any) => {
        deleteDevice(record.deviceId)
          .then(() => {
            done(true);
            Message.success('删除成功！');
            page.reload();
          })
          .catch(() => {
            done(false);
          });
      },
    });
  };

  const handler = useModalHandler({
    onSuccess() {
      page.reload();
    },
  });

  const repairRecordModal = useModalHandler();

  const addHandler = useModeModalHandler({
    onSuccess() {
      page.reload();
    },
  });

  const scroll = {
    x: 1600,
  };
</script>

<template>
  <div class="flex flex-col">
    <TableLayout
      :scroll="scroll"
      :scrollbar="true"
      v-bind="page.bindProps"
      @create="addHandler.showAdd()"
    >
      <template #searchForm="{ state }">
        <a-form-item field="name" label="设备编码">
          <a-input
            v-model="state.name"
            placeholder="请输入设备编码"
            allow-clear
          />
        </a-form-item>
        <a-form-item field="idCard" label="设备名称">
          <a-input
            v-model="state.idCard"
            placeholder="请输入设备名称"
            allow-clear
          />
        </a-form-item>
        <a-form-item field="phone" label="设备型号">
          <a-input
            v-model="state.phone"
            placeholder="请输入手机号码"
            allow-clear
          />
        </a-form-item>
        <a-form-item field="village" label="设备状态">
          <a-input
            v-model="state.village"
            placeholder="请输入设备状态"
            allow-clear
          />
        </a-form-item>
      </template>

      <template #action="{ record }">
        <a-space>
          <a-button
            v-if="record.canBeScrapped"
            size="small"
            type="text"
            @click="handler.showModal(record)"
          >
            报损
          </a-button>
          <a-button
            v-if="record.canBeDeleted"
            size="small"
            type="text"
            status="danger"
            @click="onDelete(record)"
          >
            删除
          </a-button>
          <a-button
            v-if="record.repairTime"
            size="small"
            type="text"
            @click="repairRecordModal.showModal(record)"
          >
            报损记录
          </a-button>
        </a-space>
      </template>
    </TableLayout>

    <!-- 报损弹窗 -->
    <ReportModal v-bind="handler.bindProps" />

    <ReportRecordModal v-bind="repairRecordModal.bindProps" />

    <AddModal :device-type="deviceTypeId" v-bind="addHandler.bindProps" />
  </div>
</template>
